<template>
  <div class="enterpriseScroll">
      <div class="chart_bd">
          <div class = "scoll_hd">
              <span class = "eName">企业名称</span>
              <span class = "eNum">录用人数</span>
              <span class = "scale">企业规模</span>
          </div>
          <div class="scoll_bd">
            <div style="height:100%;overflow: scroll;" id = "incomingUsers">
                <ul class = "normal_ul" id = "normal_ul">
                    <li v-for="(item, index) in enterpriseData" :key="index" v-show="item.eName !== ''">
                        <span class = "eName">{{item.eName}}</span>
                        <span class = "eNum">{{item.employeeNum}}</span>
                        <span class = "scale">{{item.scale}}</span>
                    </li>
                </ul>
                <ul class = "normal_ul" id = "normal_ul2">
                    
                </ul>
            </div>
          </div>
      </div>
  </div>
</template>

<script>
export default {
  name: 'enterpriseScroll',
  props: ['enterpriseData'],
  data () {
      return {
        myTimer: ''
      }
  },
  watch: {
      enterpriseData: function (newQuestion, oldQuestion) {
        var usersList2=document.getElementById("normal_ul2");
        usersList2.innerHTML = '';                  //清空列表2，不然列表2数据不会变
        setTimeout(()=>{
            this.startRoll()
        },1000)
      }
  },
  mounted () {
      this.myData = this.enterpriseData
  },
  methods: {
    rollList () {
        window.clearInterval(this.myTimer);
        var  myspeed = 150;
        
        var incomingUsers=document.getElementById("incomingUsers");
        var usersList=document.getElementById("normal_ul");
        var usersList2=document.getElementById("normal_ul2");
        usersList2.innerHTML = usersList.innerHTML;
        function Marquee(){
            if(incomingUsers.scrollTop>=usersList.offsetHeight){
                incomingUsers.scrollTop=0;
            }else{
                incomingUsers.scrollTop += 1;
            }
        }
        this.myTimer = setInterval(Marquee,myspeed);
        incomingUsers.onmouseover=() =>{ clearInterval(this.myTimer); };
        incomingUsers.onmouseout=() => { this.myTimer=setInterval(Marquee,myspeed); };
    },
    startRoll () {
        let outBoxHeight=document.getElementById("incomingUsers").offsetHeight;
        let listHeight=document.getElementById("normal_ul").offsetHeight;
        if(outBoxHeight<listHeight){
            this.rollList();//滚动呼入用户列表
        }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.enterpriseScroll{
    height: 100%;
}
.chart_bd {
    position: relative;
    height: 100%;
    overflow: hidden;
}
.chart_bd .scoll_hd{
    position: absolute;
    top: 20px;
    left: 0;
    right: 0;
}
.chart_bd .scoll_bd{
    position: relative;
    height: 100%;
    padding-top: 60px;
    overflow: hidden;
}
.scoll_bd>div::-webkit-scrollbar{
    width: 0;
}
.normal_ul li,.scoll_hd{
    height: 40px;
    line-height: 40px;
    color: #d9d9d9;
    text-align: center;
}
.normal_ul li span,.scoll_hd span{
    float: left;
    text-align: center;
}
.normal_ul li .eName,.scoll_hd .eName{
    width: 45%;
    white-space:nowrap;
    overflow:hidden;			
    text-overflow:ellipsis;	

}
.normal_ul li .eNum,.scoll_hd .eNum{
    width: 25%;
}
.normal_ul li .scale,.scoll_hd .scale{
    width: 30%;
}
.normal_ul li .eName{
    color: #d9d9d9;
}
.normal_ul li .eNum{
    color: #b3b3b3;
}
.normal_ul li .scale{
    color: #e05806;
}
</style>
